<template>
    <Child v-for="u of users" :country="u.location.country" :name="u.name.first" :avatar="u.picture.medium"></Child>
</template>

<script setup lang="ts">
import axios from "axios";
import {useRequest} from "vue-request";
import {computed} from "vue";
import {AxiosRespResults} from "../model/ModelRandomUser.js";
import Child from "../components/Child.vue";

const {data} = useRequest<AxiosRespResults>(() => axios.get('https://randomuser.me/api/'));

const users = computed(() => {
    return data.value?.data.results || []
});
</script>

<style scoped>

</style>
